<template>

	<view class="index-tablist-box">
		<view class="scroll-container" ref="scrollContainer">
			<!-- 骨架屏 -->
			<t-skeleton v-if="loading && dataList.length === 0" :rows="6" :title="false" :image="true"
				image-shape="square" image-size="120px" :animate="true" style="padding: 10px 12.5px;"></t-skeleton>
			<view v-else class="list-box">
				<CoverImage class="itembox" v-for="(item, index) in dataList" :key="index"
					@click="goToDetail(item.courseId)" :item="item" :cache="false"></CoverImage>
			</view>
			<view class="load-status" v-if="isLoadingMore">
			  加载中...
			</view>
			<view class="load-status" v-if="!loadMoreStatus">
				————&nbsp;&nbsp;&nbsp;&nbsp;啊呀~到底了呢&nbsp;&nbsp;&nbsp;&nbsp;————
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineExpose,
		onMounted,
		watch
	} from 'vue';
	import {
			useRouter,
			useRoute
		} from 'vue-router';
	import comicApi from '@/api/comicApi';
	import {
		debounce
	} from 'lodash';
	import {
		hoursDifference
	} from "@/utils/utils";
	import ImageCache from "../ImageCache";
	import ComicHeart from '../ComicHeart';
	import CoverImage from '../CoverImage';
	const router = useRouter();
	const route = useRoute();
	

	const props = defineProps({
		classifyId: {
			type: String
		}
	})
	const dataList = ref([]);
	const pageInfo = ref({
		page: 1,
		limit: 15,
		totalPage: null
	});
	const isEmpty = ref(false);
	const refresherTriggered = ref(false);
	const loading = ref(true);
	const loading_icon = ref(false);
	

	// 查询数据
	const getData = async (params) => {
		// const cache = uni.getStorageSync("newtablist_cache") && JSON.parse(uni.getStorageSync("newtablist_cache"));
		// const cache_time = uni.getStorageSync("newtablist_cache_time");
		// const isRequest = hoursDifference(cache_time, Date.now());
		// if (cache.length > 0 && !isRequest) {
		// 	dataList.value = cache;
		// } else {
		// 	const result = await comicApi.list({
		// 		page: 1,
		// 		limit: 15,
		// 		sort: 2,
		// 		...params
		// 	});
		// 	const res = result.data;
		// 	uni.setStorageSync("newtablist_cache", JSON.stringify(res.list));
		// 	uni.setStorageSync("newtablist_cache_time", Date.now());
		// 	pageInfo.value = {
		// 		totalPage: res.totalPage,
		// 		page: res.currPage
		// 	};
		// 	dataList.value = res.list;
		// }

		const result = await comicApi.list({
			page: 1,
			limit: 15,
			sort: 2,
			// ...params
		});
		const res = result.data;
		pageInfo.value = {
			totalPage: res.totalPage,
			page: res.currPage
		};
		dataList.value = res.list;
		
	}

	// 判断缓存是否需要刷新
	// onShow(async () => {
	// 	const cache = uni.getStorageSync("newtablist_cache") && JSON.parse(uni.getStorageSync(
	// 		"newtablist_cache"));
	// 	if (cache) {
	// 		const result = await comicApi.list({
	// 			page: 1,
	// 			limit: 15,
	// 			sort: 2,
	// 		});
	// 		const res = result.data;
	// 		pageInfo.value = {
	// 			totalPage: res.totalPage,
	// 			page: res.currPage
	// 		};
	// 		const isNewId = res.list[0]?.courseId;
	// 		const cacheIds = cache.map((item) => item.courseId);
	// 		const isReload = cacheIds?.includes(isNewId); // 检查ID是否存在，存在就不刷新，不存在就刷新
	// 		if (!isReload) {
	// 			uni.setStorageSync("newtablist_cache", JSON.stringify(res.list));
	// 			uni.setStorageSync("newtablist_cache_time", Date.now());
	// 			dataList.value = res.list;
	// 		}
	// 	}

	// })

	// 刷新
	const reload = async () => {
		const result = await comicApi.list({
			page: 1,
			limit: 15,
			sort: 2,
		});
		const res = result.data;
		pageInfo.value = {
			totalPage: res.totalPage,
			page: res.currPage
		};
		dataList.value = res.list;
	}

	// 滚动加载数据
	const scrolltolower = async () => {
		if (pageInfo.value.page >= pageInfo.value.totalPage) {
			isEmpty.value = true;
			return;
		}
		loading_icon.value = true;
		const result = await comicApi.list({
			sort: 2,
			page: pageInfo.value.page += 1,
			limit: 15
		});
		const res = result.data;
		pageInfo.value = {
			totalPage: res.totalPage,
			page: res.currPage
		};
		dataList.value = [...dataList.value, ...res.list];
		loading_icon.value = false;
	}

	// 打开详情页
	const goToDetail = debounce((courseId) => {
		router.push({
			name: 'home',
			query: {
				courseId: courseId
			}
		});
	}, 300);

	defineExpose({
		reload: reload,
		scrolltolower: scrolltolower
	})

	// onMounted(async () => {
	// 	loading.value = true;
	// 	await getData({
	// 		classifyId: props.classifyId
	// 	});
	// 	loading.value = false;
	// 	console.log('props.classifyId111',props.classifyId)

	// })
	watch(
	  () => props.classifyId,
	  async (newVal) => {
	    if (!newVal) {
	      console.warn('classifyId 为空，不加载数据');
	      return; // 为空时不执行后续逻辑
	    }
	    // 正常加载数据
	    loading.value = true;
	    // await getData({ classifyId: newVal });
		 await getData();
	    console.log('classifyId 有效值:', newVal);
	    loading.value = false;
	  },
	  { immediate: true }
	);
</script>

<style lang="scss" scoped>
	.index-tablist-box {
		.list-box {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			
			.itembox{
				margin-right: 12px;
				margin-bottom: 20px;
			}

			.itembox:nth-of-type(3n) {
				margin-right: 0;
			}
		}
	}
</style>